<template>
  <div class="content">
    <el-form
      :model="form"
      label-width="auto"
      style="max-width: 1000px; margin-right: 300px"
      :rules="rules"
      ref="ruleFormRef"
    >
      <el-form-item label="账号" prop="userName">
        <el-input v-model="form.userName" placeholder="请输入账号" style="width: 300px"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="form.password" placeholder="请输入密码" show-password style="width: 300px"></el-input>
      </el-form-item>
      <el-form-item>
        <div style="padding-left: 50px">
          <el-button type="primary" @click="submit">登录</el-button>
          <!-- <el-button type="primary" @click="localServer">本地</el-button>
          <el-button type="primary" @click="remoteServer">远端</el-button> -->
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup>
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
import Cookies from "js-cookie";
import axios from "axios";
import { useOptionsStore } from "@/store/options";
import { ElMessage, ElLoading } from "element-plus";
import { hello2, login } from "@/js/api.js";
import md5 from "blueimp-md5";

const router = useRouter();
const store = useOptionsStore();

const token = Cookies.get("authToken");

const form = reactive({
  userName: "",
  password: "",
});

const ruleFormRef = ref(null);

const rules = reactive({
  userName: [{ required: true, message: "请输入账号", trigger: "blur" }],
  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
});

const remoteServer = async () => {
  hello2().then((res) => {
    if (res.code == 200) {
      ElMessage.success("服务开启成功");
    }
  });
};
const localServer = async () => {
  const loading = ElLoading.service({
    lock: true,
    text: "请求中",
    background: "rgba(0, 0, 0, 0.7)",
  });
  try {
    // const response = await axios.post("https://poknew.yunle360.com/poker/font/tv/webLogin", { ...form });
    const response = await fetch("http://localhost:8080/test/rfid", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ type: 1 }),
    });
    loading.close();
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    const data = await response.json();
    if (data.code == 200) {
      ElMessage.success("服务开启成功");
    } else {
      ElMessage.error("服务异常");
    }
  } catch (error) {
    loading.close();
  }
};
const submit = async (val) => {
  await ruleFormRef.value.validate();
  login({ ...form, password: md5(form.password.toString()) }).then(async (res) => {
    if (res.code == 200) {
      store.options.token = res.data.token;
      store.options.uid = res.data.anchorId;
      Cookies.set("authToken", res.data.token, { expires: 1 });
      Cookies.set("uid", res.data.anchorId, { expires: 1 });
      router.replace({ name: "Video" });
    }
  });
};
Cookies.remove("authToken");
Cookies.remove("uid");
</script>
<style scoped>
.content {
  background: url("../../assets/homebimg.jpg") no-repeat;
  background-size: 100% 100%;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: end;
}
</style>
